<template>

	<view class="coupon-manage">

		<navigator class="back-arrow" url="/pages/index/index">

			<view class="arrow"></view>

		</navigator>

		<text class="title">卡券管理</text>

	</view>





	<view class="add-coupon">

		<text class="add-text">新增优惠券</text>

		<text class="add-button" @click="addCoupon">＋新增</text>

	</view>



	<!-- tab 切换 -->

	<view class="tab-container">

		<view class="tab-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">

			进行中

		</view>

		<view class="tab-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">

			已结束

		</view>

	</view>





	<!-- 切换内容 -->

	<view class="content">

		<!-- 进行中 -->

		<view v-if="activeTab === 0">



			<view class="coupon-container" v-for="(coupon, index) in coupons" :key="index">

				<!-- 左侧部分：优惠券信息 -->

				<view class="left-side">

					<view class="condition">{{ coupon.condition }}</view>

					<view class="amount">{{ coupon.amount }}</view>

				</view>



				<!-- 中间竖杠 -->

				<view class="view-divider"></view>



				<!-- 右侧部分：其他信息 -->

				<view class="right-side">

					<!-- 通用/加油站信息 -->

					<view class="coupon-name">优惠券名称：{{ coupon.name }}</view>

					<view class="coupon-expiry">有效期：{{coupon.expiry}}</view>

					<view class="coupon-limit">每人限领1张</view>

				</view>

			</view>





			<!-- 折扣券 -->

			<!-- 折扣券列表 -->

			<view class="coupon-container" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">

				<view class="left-side">

					<view class="discount">{{ coupon.discount }}</view>

				</view>

				<view class="view-divider"></view>

				<view class="right-side">

					<view class="coupon-name">优惠券名称：{{ coupon.name }}</view>

					<view class="coupon-expiry">有效期：{{coupon.expiry}}</view>

					<view class="coupon-limit">每人限领1张</view>

				</view>

			</view>





		</view>



		<!-- 已结束 -->

		<view v-if="activeTab === 1">





			<view class="coupon-container-over" v-for="(coupon, index) in coupons" :key="index">

				<!-- 左侧部分：优惠券信息 -->

				<view class="left-side-over">

					<view class="condition">{{ coupon.condition }}</view>

					<view class="amount">{{ coupon.amount }}</view>

				</view>



				<!-- 中间竖杠 -->

				<view class="view-divider"></view>



				<!-- 右侧部分：其他信息 -->

				<view class="right-side">

					<!-- 通用/加油站信息 -->

					<view class="coupon-name-over">优惠券名称：{{ coupon.name }}</view>

					<view class="coupon-expiry-over">有效期：{{coupon.expiry}}</view>

					<view class="coupon-limit">每人限领1张</view>

				</view>

			</view>





			<!-- 折扣券 -->

			<!-- 折扣券列表 -->

			<view class="coupon-container-over" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">

				<view class="left-side-over">

					<view class="discount">{{ coupon.discount }}</view>

				</view>

				<view class="view-divider"></view>

				<view class="right-side">

					<view class="coupon-name-over">优惠券名称：{{ coupon.name }}</view>

					<view class="coupon-expiry-over">有效期：{{coupon.expiry}}</view>

					<view class="coupon-limit">每人限领1张</view>

				</view>

			</view>



		</view>



	</view>

</template>



<script setup>
	import {
		ref
	} from 'vue';



	const activeTab = ref(0);



	const changeTab = (index) => {

		activeTab.value = index;

	};





	const addCoupon = () => {

		console.log("新增优惠券");

		// 新增优惠券跳转

		uni.navigateTo({

			url: "/pages/index/couponManagement/grantCoupon/grantCoupon"

		})

	};





	// 模拟优惠券数据

	const coupons = ref([

		{
			amount: 15,
			condition: "满288减",
			name: "新用户专享体验券",
			expiry: "2024.04.11至2024.05.11"
		},

		{
			amount: 20,
			condition: "满200减",
			name: "新用户专享体验券",
			expiry: "2024.03.01至2024.04.01"
		}

	]);



	// 模拟折扣券数据

	const discountCoupons = ref([

		{
			discount: "9折",
			name: "新用户专享体验券",
			expiry: "2024.05.01至2024.06.01"
		},



	]);



	// 领取满减券

	const receiveCoupon = (index) => {

		console.log(`使用满减券：`, coupons.value[index]);

		uni.showToast({
			title: "使用满减券成功！",
			icon: "success"
		});

	};



	// 领取折扣券

	const receiveDiscountCoupon = (index) => {

		console.log(`使用折扣券：`, discountCoupons.value[index]);

		uni.showToast({
			title: "使用折扣券成功！",
			icon: "success"
		});

	};
</script>



<style>
	.coupon-manage {

		display: flex;

		justify-content: center;

		align-items: center;
		/* 调整对齐方式，让内容靠近顶部 */

		height: 10vh;

		background-color: #F8F8F8;

	}



	.back-arrow {

		position: relative;

		display: flex;

		align-items: center;

		justify-content: center;

		cursor: pointer;

		left: -250rpx;

	}



	.arrow {

		width: 20rpx;

		height: 20rpx;

		border-top: 4rpx solid black;

		border-right: 4rpx solid black;

		transform: rotate(-135deg);

		margin-top: 2vh;

	}



	.title {

		font-size: 40rpx;

		font-weight: normal;

		color: black;

		margin-top: 2vh
			/* 向上移动标题，减少底部空间 */

	}



	/*  */



	/* 新增按钮样式 */

	.add-coupon {

		margin-top: 20rpx;

		display: flex;

		justify-content: space-between;

		align-items: center;

		padding: 20rpx;

		background-color: #ffffff;

		padding: 30rpx 50rpx 30rpx 60rpx;

		border: 1px solid lightgray;

	}



	.add-text {

		margin-left: 40rpx;

		font-weight: bolder;

		font-size: 36rpx;

		color: #007aff;

	}



	.add-button {

		margin-right: 20rpx;

		font-size: 30rpx;

		color: black;

		padding: 10rpx 20rpx;

		border-radius: 10rpx;

		border: 1px solid lightgray;

	}





	/* tab 样式 */

	.tab-container {

		margin-top: 50rpx;

		display: flex;

		justify-content: space-around;

		padding: 20rpx 0;

		/* background-color: #F8F8F8; */

		margin-bottom: 30rpx;

	}



	.tab-item {

		font-size: 32rpx;

		color: #666;

		padding-bottom: 10rpx;

		border-bottom: 4rpx solid transparent;

	}



	.tab-item.active {

		color: #007aff;

		font-weight: bold;

		border-bottom: 4rpx solid #007aff;

	}



	/*  */

	.coupon-container {

		width: 700rpx;

		height: 190rpx;

		margin-left: 24rpx;

		margin-bottom: 16rpx;

		display: flex;

		background-color: #0D7AF7;

		padding-left: 10rpx;

		border-radius: 12rpx;

	}

	/* 已结束 */

	.coupon-container-over {

		width: 700rpx;

		height: 190rpx;

		margin-left: 24rpx;

		margin-bottom: 16rpx;

		display: flex;

		background-color: #89B0EC;

		padding-left: 10rpx;

		border-radius: 12rpx;

	}





	/* 左侧区域*/

	.left-side {

		margin-top: 10rpx;

		margin-left: 4rpx;

		height: 100rpx;

		background-color: #0D7AF7;

		padding-top: 4rpx;

		padding-left: 56rpx;

		padding-bottom: 20rpx;

		border-radius: 20rpx;

		flex: 1;

	}

	/* 已结束 */

	.left-side-over {

		margin-top: 10rpx;

		margin-left: 4rpx;

		height: 100rpx;

		background-color: #89B0EC;

		padding-top: 4rpx;

		padding-left: 56rpx;

		padding-bottom: 20rpx;

		border-radius: 20rpx;

		flex: 1;

	}







	.amount {

		margin-top: 14rpx;

		font-size: 80rpx;

		color: white;

		font-weight: Bold;

	}





	/* 折扣 */

	.discount {

		margin-top: 24rpx;

		font-size: 76rpx;

		color: white;

		font-weight: normal;

	}







	.condition {

		font-size: 14px;

		color: white;

		margin-top: 10px;

	}







	/* 右侧区域 */

	.right-side {

		flex: 2;

		padding: 15px 0px 15px 15px;

	}



	.coupon-name {

		margin-top: 26rpx;

		font-size: 24rpx;

		color: #81b6f9;

		margin-bottom: 6rpx;

	}

	/* 已结束 */

	.coupon-name-over {

		margin-top: 26rpx;

		font-size: 24rpx;

		color: #c3d7f5;

		margin-bottom: 6rpx;

	}



	.coupon-expiry {

		font-size: 24rpx;

		color: #81b6f9;

		margin-bottom: 6rpx;

	}

	/* 已结束 */

	.coupon-expiry-over {

		font-size: 24rpx;

		color: #c3d7f5;

		margin-bottom: 6rpx;

	}





	.coupon-limit {

		font-size: 24rpx;

		color: white;



	}



	.bottom-row {

		margin-left: 24rpx;

		display: flex;

		justify-content: space-between;

		align-items: center;

	}



	.expiry-date {



		font-size: 22rpx;

		color: #EA1703;

	}







	/* 领取按钮 */

	.receive-btn {

		width: 100rpx;

		height: 36rpx;

		background-color: #0084FF;

		color: white;

		padding: 8rpx 6rpx;

		border-radius: 8rpx;

		display: flex;

		align-items: center;

		justify-content: center;

		cursor: pointer;

		font-size: 25rpx;

	}







	/* 中间的竖杠 */

	.view-divider {

		width: 2rpx;

		height: 140rpx;
		/* 根据父容器的高度来设置竖杠的高度 */

		background-color: white;
		/* 竖杠的颜色 */

		margin-top: 34rpx;
		/* 给竖杠两边留一些间距 */

	}
</style>